<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新增车辆</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
    <link rel="stylesheet" type="text/css" href="../js/layer/theme/default/layer.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/config.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/filter.js"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
  </head>
  <body>
  <form class="cars-form" id="carsForm" onsubmit="return formSubmit()">

    <input type="hidden" name="marketId" v-bind:value="marketId" required>
    <input type="hidden" name="userId" v-bind:value="userId" required>
    
    <!-- <input type="hidden" name="carId" v-bind:value="res.carId"> -->
    
    <div class="panel">
      <div class="title">收购信息</div>
      <div class="box">
       <div class="cell-car">
         <label><span class="red">*</span>所属车商</label>
         <select v-model="shopId" v-bind:value="shopId"  disabled="disabled"  required >
            <option v-for="shop in shopList" v-bind:value="shop.shopId" >{{shop.shopName}}</option>
         </select>
         <input type="hidden" name="shopId" v-bind:value="shopId" required>
       </div>
       <div class="cell-car">
         <label><span class="red">*</span>所属区域</label>
         <select  name="regionId">
            <option v-for="region in regionList" v-bind:value="region.regionId" >{{region.regionName}}</option>
          </select>
       </div>
       <div></div>
       <div class="cell-car">
          <label><span class="red">*</span>车架号</label>
          <input type="text" name="carVin" required pattern="^([0-9A-Z]){17}$" oninput="checkVin(this)" maxlength="17">
        </div>
       <div class="cell-car">
        <!-- <div class="cell-car">
           <label>品牌</label>
           <input type=""  v-bind:value="res.brand.brandName"  style="margin-right: 10px;" disabled>
           <input type=""  v-bind:value="res.series.seriesName" style="margin-right: 10px;" disabled>
           <input type="" v-bind:value="res.model.modelName" style="width: 300px;" disabled>

           <input type="hidden" name="brandId" v-bind:value="res.brand.brandId">
           <input type="hidden" name="seriesId" v-bind:value="res.series.seriesId">
           <input type="hidden" name="modelId" v-bind:value="res.model.modelId">
           
         </div> -->
         <label><span class="red">*</span>品牌车系</label><input type="text" readonly name="" placeholder="请选择品牌车系" class="brand-input" style="width: 400px;">
         <input type="hidden" class="brandId-input" name="brandId">
        <input type="hidden" class="seriesId-input" name="seriesId">
        <input type="hidden" class="modelId-input" name="modelId" required>
       </div>
       
       <div class="cell-car">
         <label><span class="red">*</span>表显里程</label>
         <div class="group-input"><input type="text" name="carMileage" required><span>万公里</span></div>
       </div>
<!--        <div class="cell-car">
         <label>实际里程</label>
         <div class="group-input"><input type="number" name="carMileage" required><span>万公里</span></div>
       </div> -->

       <div class="cell-car">
         <label>钥匙数量</label>
         <div class="group-input"><input type="text" name="carKeyNum" maxlength="2"><span>把</span></div>
       </div>
        <div class="cell-car">
          <label><span class="red">*</span>首次上牌</label>
          <div class="group-radio"><input name="carLicenceState" type="radio" value="1"  v-model="res.carLicenceState" />已经上牌</div> 
          <div class="group-radio"><input name="carLicenceState" type="radio" value="2" v-model="res.carLicenceState" />未上牌</div> 
          <div class="group-radio"><input name="carLicenceState" type="radio" value="3" v-model="res.carLicenceState" />新车</div> 
          <input type="month" name="carLicenceDate" :max="nowMonth"  :disabled="res.carLicenceState != 1">
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="title">基本信息</div>
      <div class="box">
        <div class="cell-car">
          <label><span class="red">*</span>宣传标题</label>
          <input type="text" name="carTitle" required>
        </div>
        <div class="cell-car">
          <label><span class="red">*</span>销售人员</label>
          <select  name="saleUserId" required>
            <option  v-for="user in userList" v-bind:value="user.userId"  >{{user.userName}}</option>
          </select>
        </div>
        <div class="cell-car">
          <label>车型</label>
          <select  name="carTypeId" >
            <option  v-for="carType in carTypeList" v-bind:value="carType.carTypeId"  >{{carType.carTypeName}}</option>
            
          </select>
        </div>
        <div class="cell-car">
          <label>车门数</label>
          <div class="group-input"><input type="number" name="carDoorNum"><span>门</span></div>
        </div>
        <div class="cell-car">
          <label>排量</label>
          <div class="group-input" id="carDisplacement">
            <input type="text" name="carDisplacement">
            <input type="text" name="carInletModel" :value="Tchecked?'T':'L'" readonly  id="carInletModelId">
          </div>
          <div class="group-checkbox" style="margin-left: -10px;"><input  type="checkbox" v-model="Tchecked"  />涡轮增压</div>
        </div>
        <div class="cell-car">
          <label>燃料类型</label>
          <select  name="carFuel">
            <option>汽油</option>
            <option>柴油</option>
            <option>电动</option>
            <option>混合</option>
            <option>其他</option>
          </select>
        </div>
        <div class="cell-car">
          <label>变速箱</label>
          <select  name="carGearbox">
            <option>自动</option>
            <option>手动</option>
          </select>
        </div>
        <div class="cell-car">
          <label>排放标准</label>
          <select  name="carEnviron">
            <option value="国I">国I</option>
            <option value="国II">国II</option>
            <option value="国III">国III</option>
            <option value="国IV">国IV</option>
            <option value="国V">国V</option>
            <option value="欧I">欧I</option>
            <option value="欧II">欧II</option>
            <option value="欧III">欧III</option>
            <option value="欧IV">欧IV</option>
            <option value="欧V">欧V</option>
            <option value="欧VI">欧VI</option>
          </select>
        </div>
        <div class="cell-car">
          <label><span class="red">*</span>外观颜色</label>
          <select  name="carOutColor" required>
            <option>黑色</option>
            <option>白色</option>
            <option>银色</option>
            <option>灰色</option>
            <option>棕色</option>
            <option>香槟色</option>
            <option>红色</option>
            <option>蓝色</option>
            <option>绿色</option>
            <option>紫色</option>
            <option>黄色</option>
            <option>橙色</option>
            <option>其他</option>
          </select>
        </div>
        <div class="cell-car">
          <label>内饰颜色</label>
          <select  name="carInColor" required>
            <option>黑色</option>
            <option>白色</option>
            <option>米色</option>
            <option>银色</option>
            <option>灰色</option>
            <option>棕色</option>
            <option>香槟色</option>
            <option>红色</option>
            <option>蓝色</option>
            <option>绿色</option>
            <option>紫色</option>
            <option>黄色</option>
            <option>橙色</option>
            <option>金色</option>
            <option>其他</option>
          </select>
        </div>

        <!-- <div class="cell-car">
          <label>交强险</label>
          <div class="group-radio"><input name="Fruit4" type="radio" value="" />有</div> 
          <div class="group-radio"><input name="Fruit4" type="radio" value="" />无</div> 
        </div>

        <div class="cell-car">
          <label>商业险</label>
          <div class="group-radio"><input name="Fruit5" type="radio" value="" />有</div> 
          <div class="group-radio"><input name="Fruit5" type="radio" value="" />无</div> 
        </div> -->
        <div class="cell-car">
          <label><span class="red">*</span>交强险到期日期</label>
          <input type="month" name="carForceInsuranceDate" required>
        </div>
        <div class="cell-car">
          <label>商业险到期日期</label>
          <input type="month" name="carBusinessInsuranceDate" >
        </div>


        <div class="cell-car">
          <label><span class="red">*</span>年审到期</label>
          <input type="month" name="carValidateDate" required>
        </div>

        <div class="cell-car">
          <label>出厂年月</label>
          <input type="month" name="carFacotryDate" >
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="title">定价信息</div>
      <div class="box">
        <div class="cell-car">
          <label><span class="red">*</span>零售价</label>
          <div class="group-input"><input type="text" name="carRetailPrice" required><span>万元</span></div>
        </div>
        <div class="cell-car">
          <label style="margin-left: 25px;">是否包含过户费</label>
          <div class="group-radio"><input name="carTransferState" type="radio" value="1" checked />有</div> 
          <div class="group-radio"><input name="carTransferState" type="radio" value="0"  />无</div> 
        </div>
      </div>
    </div>


    <div class="panel">
      <div class="title">车辆描述</div>
      <div class="box">
        <!-- <div class="cell-car">
          <label style="float: left;">费用情况</label>
          <textarea></textarea>
        </div> -->
        <div class="cell-car">
          <label style="float: left;">瑕疵描述</label>
          <textarea  name="carFlawDesc" maxlength="500" ></textarea>
        </div>
      </div>
    </div>



    <div class="panel">
      <div class="title">销售描述</div>
      <div class="box">
        <div class="cell">
          <div class="cell-car">
            <label>一口价</label>
            <div class="group-radio"><input name="carFixedPriceState" type="radio" value="1"  />是</div> 
            <div class="group-radio"><input name="carFixedPriceState" type="radio" value="0" checked />否</div> 
          </div>
          <div class="cell-car">
            <label>可按揭</label>
            <div class="group-radio"><input name="carMortgageState" type="radio" value="1"  />是</div> 
            <div class="group-radio"><input name="carMortgageState" type="radio" value="0" checked />否</div> 
          </div>
          <div class="cell-car">
            <label>特价车</label>
            <div class="group-radio"><input name="carBargainPriceState" type="radio" value="1"  />是</div> 
            <div class="group-radio"><input name="carBargainPriceState" type="radio" value="0" checked />否</div> 
          </div>
<!--           <div class="cell-car">
            <label>认证状态</label>
            <div class="group-radio"><input name="carAuthState" type="radio" value="10"  />已认证</div> 
            <div class="group-radio"><input name="carAuthState" type="radio" value="0" checked />未认证</div> 
          </div> -->
<!--           <div class="cell-car">
            <label>认证状态</label>
            <div class="group-radio"><input name="carAuthState" type="radio" value="1" v-model="res.carAuthState" />已认证</div> 
            <div class="group-radio"><input name="carAuthState" type="radio" value="0" v-model="res.carAuthState" />未认证</div> 
          </div> -->
        </div>
        
        <!-- <div class="cell-car">
          <label>质保等级</label>
          <select></select>
        </div>
        <div class="cell-car">
          <label>质保费用</label>
          <div class="group-input"><input type="" name=""><span>元</span></div>
        </div> -->


        <div class="cell-car">
          <label  style="float: left;">按揭说明</label>
          <textarea  name="carMortgageDesc" maxlength="500" ></textarea>
        </div>
        <div class="cell-car">
          <label  style="float: left;">卖点描述</label>
          <textarea  name="carSellingPointDesc"  maxlength="500" ></textarea>
        </div>
      </div>
    </div>



    <div class="panel">
      <div class="title">图片管理</div>
      <div class="box clearfix">
        <div class="image-list" v-for="(carImage,index) in carImageList">
          <img src="../images/default.png">
          <div class="image-loading"></div>
          <p>{{carImage | filterImageName}}</p>
          <input type="file"  accept="image/jpg,image/jpeg,image/png" name="" :data-imageKey="carImage" v-bind:id="carImage" data-imageUrl="" :data-imageSeq="index+1">
          <span class="delete-img" onclick="removeImg(this)"></span>
        </div>
      </div>
    </div>


    <div class="panel">
      <div class="title">车辆保养</div>
      <div class="box">
        <div class="cell-car">
          <label style="margin-left: 20px">是否4S店定期保养</label>
          <div class="group-radio"><input name="car4sUpkeepState" type="radio" value="1"  />是</div> 
          <div class="group-radio"><input name="car4sUpkeepState" type="radio" value="0" checked  />否</div> 
        </div>
      </div>
    </div>
<div v-if="modelConf">
    <div class="title">车辆配置</div>
    <div class="panel">
      <div class="title">基本参数</div>
      <div class="box">
        <div class="cell-car">
          <label>厂商</label>
          <input type="" name="" v-bind:value="modelConf.modelManufacturer" disabled>
        </div>
<!--         <div class="cell-car">
          <label>级别</label>
          <select disabled>
            <option  v-for="carType in carTypeList" v-bind:value="carType.carTypeId" :selected="carType.carTypeId == res.carTypeId" >{{carType.carTypeName}}</option>
          </select>
        </div> -->
        <div class="cell-car">
          <label>发动机</label>
          <input type="" name="" v-bind:value="modelConf.modelEngineModel" disabled>
        </div>
        <div class="cell-car">
          <label>变速箱</label>
          <input type="" name="" v-bind:value="modelConf.modelGearbox" disabled>
        </div>
        <div class="cell-car">
          <label>车身结构</label>
          <input type="" name="" v-bind:value="modelConf.modelBodywork" disabled>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="title">车身</div>
      <div class="box">
        <div class="cell-car">
          <label>长度</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelLength" disabled><span>mm</span></div>
        </div>
        <div class="cell-car">
          <label>宽度</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelWidth" disabled><span>mm</span></div>
        </div>
        <div class="cell-car">
          <label>高度</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelHeight" disabled><span>mm</span></div>
        </div>
        <div class="cell-car">
          <label>轴距</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelWheelbase" disabled><span>mm</span></div>
        </div>
        <div class="cell-car">
          <label>车身结构</label>
          <input type="" name="" v-bind:value="modelConf.modelBody" disabled>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="title">发动机</div>
      <div class="box">
        <div class="cell-car">
          <label>发动机型号</label>
          <input type="" name="" v-bind:value="modelConf.modelEngineModel || ''" disabled>
        </div>
        <div class="cell-car">
          <label>排量</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelDisplacement" disabled><span>mL</span></div>
        </div>
        <div class="cell-car">
          <label>进气形式</label>
          <input type="" name="" v-bind:value="modelConf.modelInletModel" disabled>
        </div>
        <div class="cell-car">
          <label>气缸排列形式</label>
          <input type="" name="" v-bind:value="modelConf.modelCylinderArray" disabled>
        </div>
        <div class="cell-car">
          <label>气缸数</label>
          <div class="group-input"><input type="" name="" v-bind:value="modelConf.modelCylinderNum" disabled><span>个</span></div>
          
        </div>
        <div class="cell-car">
          <label>燃料形式</label>
          <input type="" name="" v-bind:value="modelConf.modelFuelRoz" disabled>
        </div>
        <div class="cell-car">
          <label>环保标准</label>
          <input type="" name="" v-bind:value="modelConf.modelEnviron" disabled>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="title">变速箱</div>
      <div class="box">
        <div class="cell-car">
          <label>变速箱类型</label>
          <input type="" name="" v-bind:value="modelConf.modelGearbox" disabled>
        </div>
        <div class="cell-car">
          <label>挡位个数</label>
          <input type="" name="" v-bind:value="modelConf.modelGearNum" disabled>
        </div>
      </div>
    </div>
</div>
<div v-if="carConfList">
    <div class="panel" v-for="carConf in carConfList">
      <div class="title">{{carConf.confName}}</div>
      <div class="box">
        <div class="cell-car-check" v-for="childCarConfItem in carConf.childCarConf">
          <div class="group-checkbox"><input type="checkbox" name="carConfIds" v-bind:value="childCarConfItem.confId" :checked="childCarConfItem.selectedState"  v-bind:id="childCarConfItem.confKey">{{childCarConfItem.confName}}</div>
        </div>
      </div>
    </div>
</div>

    <div class="btn-box">
      <button class="submit" type="submit">上传</button>
      <!-- <div class="submit"  onclick="submit()">上传</div> -->
      <div class="cancel"  onclick="cancel()">取消</div>
    </div>

    <div class="cars-bg">
      <div class="cars">
        <div class="title">
          <span>选择品牌</span>
          <i class="cars-close"></i>
        </div>
        <div class="center">
          <div class="brand clearfix" >
            <div class="words"></div>
            <div class="brand-box" ></div>
          </div>
          <div class="car clearfix" style="display: none;"></div>
          <div class="model clearfix" style="display: none;"></div>
        </div>
        <div class="footer">
          <span>已选车型</span>
          <span class="pick-box"></span>
          <div class="brand-btn">确定</div>
        </div>
        
      </div>
    </div>

<!--     <div class="panel">
      <div class="title">亮点配置</div>
      <div class="box">
        <div class="cell-car">
          <label style="float: left;">亮点配置</label>
          <textarea></textarea>
        </div>
      </div>
    </div> -->

    
  </form>
<div class="loading"></div>

    <div id="modelList" style="display:none">
      <ul class="model-list-ul" v-for="(item,index) in modelList">
        <li :onclick="'selectModelByVin('+index+')'">{{item.modelName}}</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">

    var numAjax=0;
  $(document).ajaxSuccess(function(evt, request, settings){  
      numAjax++;
      if (numAjax>=4) {
        $('.loading').hide()
      }
   }); 






  $(document).on('click','.brand-input',function(){
    $('.cars-bg').show();
  });
  $(document).on('click','.cars-close',function(){
    $('.cars-bg').hide();
  })


  var editCars = new Vue({
    el:'#carsForm',
    data:{
      res:{
        carLicenceState:1,
      },

      // res:{},
      Tchecked:false,
      carTypeList:[],
      resConf:{},
      shopList:[],
      regionList:[],
      userList:[],
      carConfList:false,
      modelConf:false,
      marketId:marketId,
      userId:userId,
      shopId:shopId, 
      carImageList:['vin','right_rear','driving_seat','control_booth','odograph','left_anterior','open_trunk','engine_bay','right_side','tyre','insurance','registration_license','vehicle_license']
    },
    computed:{
      nowMonth:function(){
        Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "-" + ((this.getMonth()+1 >= 1 && this.getMonth()+1 <= 9) ? "0" + (this.getMonth()+1):this.getMonth()+1)
        };
        var unixTimestamp = new Date() ;
        return unixTimestamp.toLocaleString();
      }
    }

  });

  var modelList = new Vue({
    el:"#modelList",
    data:{
      modelList:[],
    },
  })
  $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/getCarTypeList",  // yii 控制器/方法
      cache: false,      
      // data: {tel: tel},  //传送的数据
      error:function(){
         alert("数据传输错误");
      },success: function (data) {
        console.log(data);
         if (data.code != 1) {
          return false
         }
         editCars.carTypeList = data.result;
      }
  });

  $.ajax({
    type: "get",      //data 传送数据类型。post 传递
    dataType: 'json',  // 返回数据的数据类型json
    url: defaultUrl+"/controller/getShopList",  // yii 控制器/方法
    cache: false,      
    data: {'marketId': marketId},  //传送的数据
    error:function(){
       alert("数据传输错误");
    },success: function (data) {
      console.log(data);
       if (data.code != 1) {
        return false
       }
       editCars.shopList = data.result;
    }
  });

  $.ajax({
    type: "get",      //data 传送数据类型。post 传递
    dataType: 'json',  // 返回数据的数据类型json
    url: defaultUrl+"/controller/getRegionList",  // yii 控制器/方法
    cache: false,      
    data: {'marketId': marketId},  //传送的数据
    error:function(){
       alert("数据传输错误");
    },success: function (data) {
      console.log(data);
       if (data.code != 1) {
        return false
       }
       editCars.regionList = data.result;
    }
  });



  function getUserList(){
    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/getUserList",  // yii 控制器/方法
      cache: false,      
      data: {'marketId': marketId,'shopId':shopId},  //传送的数据
      error:function(){
         alert("数据传输错误");
      },success: function (data) {
        console.log(data);
         if (data.code != 1) {
          return false
         }
         editCars.userList = data.result;
      }
    });
  }
  getUserList();
  

  

  function getCarConf(){
    $('.loading').show()
    $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/getCarConfById",  // yii 控制器/方法
      cache: false,      
      data: {'carId': editCars.res.carId},  //传送的数据
      error:function(){
         alert("数据传输错误");
      },success: function (data) {
        console.log(data);
         if (data.code != 1) {
          return false
         }
         editCars.carConfList = data.result;
         $('.loading').hide()
      }
    });
  };

  function formSubmit(){
    if ($('input[name=modelId]').val() == '') {
      alert('请选择车型');
      return false;
    }

    if ($('input[data-imageKey=left_anterior]').val() == '') {
      alert('请上传首图');
      return false;
    }
    if ($('input[data-imageKey=left_anterior]').val() == '') {
      alert('请上传首图');
      return false;
    }




    $('.loading').show();
    var formData = $('#carsForm').serialize();
    var imagesJson = '&carImageJson=['
    $('.image-list input').each(function(index){
      var imageKey = $(this).attr('data-imageKey')
      var imageUrl = $(this).attr('data-imageUrl')
      var imageSeq = $(this).attr('data-imageSeq')
      var imageJson = '{"imageKey":"'+imageKey+'","imageUrl":"'+imageUrl+'","imageSeq":'+imageSeq+'},';
      imagesJson += imageJson;
    });
    imagesJson = imagesJson.substring(0,imagesJson.length-1);
    imagesJson += ']';

    var imagesData = encodeURI(imagesJson);
    console.log('formData:'+formData);
    $.ajax({
      type: "post",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl+"/controller/insertCar",  // yii 控制器/方法
      cache: false,  
      data:formData+imagesData,  
      error:function(){
        $('.loading').hide();
         alert("数据传输错误");
      },success: function (data) {
        console.log(data);
         if (data.code != 1) {
          $('.loading').hide();
          alert(data.msg);
          return false
         }
         $('.loading').hide()
         alert('添加成功！');
         window.history.go(-1);
      }
    });
    return false;
  }



  function cancel(){
    window.history.go(-1);
  }


  $(document).on('change','.image-list input',function(){
      var pic = $(this)[0].files[0];
      var _this = $(this);
      var dataImageKey =  _this.attr('data-imageKey');
      var _thisImg = $(this).parent('.image-list').find('img');
      var _thisParent = $(this).parent('.image-list').find('.image-loading').show();
      var _thisRemoveBtn = $(this).parent('.image-list').find('.delete-img');
      var fd = new FormData();
      fd.append('uploadFile', pic);
      $.ajax({
          url:defaultUrl + "/controller/upload/uploadFile",
          type:"post",
          // Form数据
          data: fd,
          dataType: 'json',  // 返回数据的数据类型json
          cache: false,
          contentType: false,
          processData: false,
          success:function(data){
            console.log(data);
            _thisParent.hide();
            if (dataImageKey != 'left_anterior') {
              _thisRemoveBtn.show();
            }
            if (data.code != 1) {
              alert('上传失败');
              return false
             }
             var reader = new FileReader();  
              reader.onload = function(evt){  
                _thisImg.attr('src',evt.target.result);  
              } 
              reader.readAsDataURL(pic); 

              _this.attr('data-imageUrl',data.result.pathUrl);


          },
          error:function(){
            _thisParent.hide();
            alert('上传失败');
          }
      }); 
  });


  $.ajax({
      type: "get",      //data 传送数据类型。post 传递
      dataType: 'json',  // 返回数据的数据类型json
      url: defaultUrl + "/controller/getGroupBrand",  // yii 控制器/方法
      cache: false,      
      // data: {tel: tel},  //传送的数据
      error:function(){
         alert("数据传输错误");
      },success: function (data) {
         console.log(data);
         if (data.code != 1) {
          return false
         }

        var resArr =  data.result;
        var wordsHtml = "";
        var brandHtml = "";
        for (var i = 0; i < resArr.length; i++) {
          wordsHtml += '<span>'+resArr[i].initial+'</span>';
          var brandListHtml = '<ul class="brand-list">';
          var brandArr = resArr[i].brandInfo;
          for (var j = 0; j < brandArr.length; j++) {
            brandArr[j].brandLogo
            brandListHtml+='<li class="on" id="'+brandArr[j].brandId+'" onclick="showCars(this,id)"><i style="background-image: url('+brandArr[j].brandLogo+');"></i><span>'+brandArr[j].brandName+'</span></li>'

          }
          brandListHtml+='</ul>';
          brandHtml+=brandListHtml;
        }
        $('.brand-box').html(brandHtml);
        $('.words').html(wordsHtml);
        $('.words span').eq(0).addClass('on');
        $('.brand-list').eq(0).show();


        $('.words span').click(function(){
        $('.words span').removeClass('on');
        $(this).addClass('on');
        $('.brand-list').hide();
        $('.brand-list').eq($(this).index()).show();
      })


      }
  });

  function showCars(_this,id){
    $('.loading').show()
      brandId = id;
      $('.pick-box').append('<span class="cars-pick brand-pick"><span>'+_this.getElementsByTagName('span')[0].innerHTML+'</span><i class="delete"></i></span>');
      $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/getSeriesList",  // yii 控制器/方法
        cache: false,      
        data: {'brandId': id},  //传送的数据
        error:function(){
           alert("数据传输错误");
        },success: function (data) {
          console.log(data);
          if (data.code != 1) {
            return false
          }

          var resultArr = data.result;
          var seriesHtml = "";
          for (var i = 0; i < resultArr.length; i++) {
            seriesHtml += '<span class="series-list" id="'+resultArr[i].seriesId+'" onclick="showModel(this,id)">'+resultArr[i].seriesName+'</span>';
          }

          $('.cars .title span').html('选择车系');

          $('.car').html(seriesHtml);
          $('.brand').hide();
          $('.car').show();
          $('.loading').hide()

        }
      });
    }

    function showModel(_this,id){
      $('.loading').show()
      console.log(id);
      seriesId = id;
      $('.pick-box').append('<span class="cars-pick series-pick"><span>'+_this.innerHTML+'</span><i class="delete"></i></span>');
      $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/getModelList",  // yii 控制器/方法
        cache: false,      
        data: {'seriesId': id},  //传送的数据
        error:function(){
           alert("数据传输错误");
        },success: function (data) {
          console.log(data);
          if (data.code != 1) {
            $('.loading').hide()
            return false
          }

          var resultArr = data.result;
          var modelHtml = "";
          for (var i = 0; i < resultArr.length; i++) {
            modelHtml += '<span class="model-list" id="'+resultArr[i].modelId+'" onclick="selectModel(this,id)">'+resultArr[i].modelName+'</span>';
          }
          $('.cars .title span').html('选择车型');
          $('.model').html(modelHtml);
          $('.car').hide();
          $('.model').show();
          $('.loading').hide()

        }
      });
    }

    function selectModel(_this,id){
      console.log(id);
      modelId = id;
      if ($('.cars-pick').length >=3) {
        $('.model-pick span').html(_this.innerHTML);
      }else{
        $('.pick-box').append('<span class="cars-pick model-pick"><span>'+_this.innerHTML+'</span><i class="delete"></i></span>');
      }
      
    }

    $(document).on("click",".brand-pick .delete",function(){  
      $('.brand-pick').remove();
      $('.series-pick').remove();
      $('.model-pick').remove();
      $('.car').hide();
      $('.model').hide();
      $('.brand').show();
      $('.cars .title span').html('选择品牌');
    });
    $(document).on("click",".series-pick .delete",function(){  
      // $('.brand-pick').remove();
      $('.series-pick').remove();
      $('.model-pick').remove();
      $('.car').show();
      $('.model').hide();
      $('.brand').hide();
      $('.cars .title span').html('选择车系');
    });
    $(document).on("click",".model-pick .delete",function(){  
      // $('.brand-pick').remove();
      // $('.series-pick').remove();
      $('.model-pick').remove();
      $('.car').hide();
      $('.model').show();
      $('.brand').hide();
    });
    $('.brand-btn').click(function(){
      $('.cars-bg').hide();
      $('.brand-input').val($('.brand-pick span').html()+$('.series-pick span').html()+$('.model-pick span').html());
      $('.brandId-input').val(brandId);
      $('.seriesId-input').val(seriesId);
      $('.modelId-input').val(modelId);

      $.ajax({
          type: "get",      //data 传送数据类型。post 传递
          dataType: 'json',  // 返回数据的数据类型json
          url: defaultUrl+"/controller/getModelInfoById",  // yii 控制器/方法
          cache: false,      
          data:{'modelId':modelId},
          error:function(){
             alert("数据传输错误");
          },success: function (data) {
            console.log(data);
             if (data.code != 1) {
              return false
             }
             editCars.modelConf = data.result[0];
          }
      });

     


      $.ajax({
          type: "get",      //data 传送数据类型。post 传递
          dataType: 'json',  // 返回数据的数据类型json
          url: defaultUrl+"/controller/getCarConfById",  // yii 控制器/方法
          cache: false, 
          // data: {tel: tel},  //传送的数据
          // data:{'modelId':modelId},
          async:false,
          error:function(){
             alert("数据传输错误");
          },success: function (data) {
            console.log(data);
             if (data.code != 1) {
              return false
             }
             editCars.carConfList = data.result;
             setCarConfig();
          }
      });

      function setCarConfig(){
          $.ajax({
            type: "get",      //data 传送数据类型。post 传递
            dataType: 'json',  // 返回数据的数据类型json
            url: defaultUrl+"/controller/getModelConfById",  // yii 控制器/方法
            cache: false, 
            // async:false,
            // data: {tel: tel},  //传送的数据
            data:{'modelId':modelId},
            error:function(){
               alert("数据传输错误");
            },success: function (data) {
              console.log(data);
               if (data.code != 1) {
                return false
               }
                setModelToForm(data.result)

               
            }
        });
      }
      function setModelToForm(model){
          for(var field in model){
            // console.log(model[field]);
              if (model[field] == 1) {
                // console.log(field);
                console.log($('#'+field+''));
                $('#'+field+'').attr('checked','checked');
              }

          }
      }

      
      
      
    });
    function removeImg(ele){
        $(ele).parent('.image-list').find('img').attr('src','');
        $(ele).parent('.image-list').find('input').attr('data-imageUrl','');
        $(ele).parent('.image-list').find('input').val('');
        $(ele).hide();
      }

function checkVin(ele){
  var str = $(ele).val().toLocaleUpperCase().replace(/\s|I|O|Q/g, "");
  $(ele).val(str);
  if (str.length == 17) {
    $('.loading').show()
    $.ajax({
        type: "get",      //data 传送数据类型。post 传递
        dataType: 'json',  // 返回数据的数据类型json
        url: defaultUrl+"/controller/model/getModelInfoByVin",  // yii 控制器/方法
        cache: false, 
        data:{'vin':str},
        // async:false,
        error:function(){
           alert("数据传输错误");
        },success: function (data) {
          console.log(data);
           if (data.code != 1) {
            return false
           }
           $('.loading').hide();
           if (data.result.length == 0) {
            layer.msg('未查到车型信息!', {icon: 2});
           }else if (data.result.length == 1) {
            modelList.modelList = data.result;
            selectModelByVin(0);
           }else if (data.result.length >1) {
            modelList.modelList = data.result;
            setTimeout(function(){
              var carModelList = $('#modelList').html();
              
              layer.open({
                type: 1,
                title: '请选择车型',
                closeBtn: 1,
                shadeClose: true,
                area: ['500px', 'auto'],
                content: carModelList,
              });
            },100)
            
           }
        }
    });

  }
  
}
function selectModelByVin(index){
  var modelInfo = modelList.modelList[index];
  var carTitle = modelInfo.brandName+modelInfo.seriesName+modelInfo.modelName;
  $('input[name=seriesId]').val(modelInfo.seriesId);
  $('input[name=modelId]').val(modelInfo.modelId);
  $('input[name=brandId]').val(modelInfo.brand.brandId);
  $('.brand-input').val(carTitle);
  $('input[name=carTitle]').val(carTitle);
  $('input[name=carDisplacement]').val(modelInfo.modelDisplacement);
  $('select[name=carGearbox]').val(modelInfo.modelGearboxModality);
  if (modelInfo.modelFuelRoz.indexOf('汽油')>=0) {
    $('select[name=carFuel]').val('汽油');
  }else if(modelInfo.modelFuelRoz.indexOf('柴油')>=0){
    $('select[name=carFuel]').val('柴油');
  }
  else if(modelInfo.modelFuelRoz.indexOf('电动')>=0){
    $('select[name=carFuel]').val('电动');
  }
  else if(modelInfo.modelFuelRoz.indexOf('混合')>=0){
    $('select[name=carFuel]').val('混合');
  }
  if (modelInfo.modelInletModel == "T" ) {
    editCars.Tchecked = true
  }
  editCars.modelConf = modelInfo;
  editCars.carConfList = modelInfo.modelConf;
  layer.closeAll();
}
</script>
<style type="text/css">
  .model-list-ul li{
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
    line-height: 40px;  
    font-size: 14px;
    cursor: pointer;
    }
</style>
</html>


































